<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>姓名案例_插值语法实现</title>
    <script type="text/javascript" src="../../vue.js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      姓:<input type="text" v-model="firstName" /> <br /><br />
      名:<input type="text" v-model="lastName" /> <br /><br />
      全名:<span>{{firstName}}-{{lastName}}</span><br />
      全名:<span>{{firstName.slice(0,1)}}-{{lastName.slice(0,2)}}</span>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          firstName: "张",
          lastName: "三",
        },
      });
    </script>
  </body>
</html>
